<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <meta name="generator" content="Hugo 0.120.4">
    <meta name="generator" content="Relearn 5.23.2">
    <meta name="description" content="操作系统-数据结构与算法-云计算-ARM64-C/C&#43;&#43;-Go">
    <meta name="author" content="Jiang Kun">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="shortcodes(简码) :: 笔记">
    <meta name="twitter:description" content="shortcodes 是 markdown 的补充，是 hugo 提供的扩展功能，简化了网站代码的编写。Relearn 主题提供了丰富的 shortcodes 。
attachment（附件） 警告 附件放在 _index.files 目录下。
{{% attachments title=&#34;**文件**&#34; pattern=&#34;.*\.(pdf|jpg)&#34; /%}} 文件 arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf (493 KB) cat.jpg (48 KB) {{% attachments style=&#34;info&#34; sort=&#34;desc&#34; /%}} 信息 test.txt (36 B) cat.jpg (48 KB) arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf (493 KB) badge（徽章） {{% badge %}}Important{{% /badge %}} {{% badge style=&#34;primary&#34; title=&#34;Version&#34; %}}6.6.6{{% /badge %}} {{% badge style=&#34;red&#34; icon=&#34;angle-double-up&#34; %}}Captain{{% /badge %}} {{% badge style=&#34;info&#34; %}}New{{% /badge %}} {{% badge color=&#34;fuchsia&#34; icon=&#34;fab fa-hackerrank&#34; %}}Awesome{{% /badge %}}Important Version6.">
    <meta property="og:title" content="shortcodes(简码) :: 笔记">
    <meta property="og:description" content="shortcodes 是 markdown 的补充，是 hugo 提供的扩展功能，简化了网站代码的编写。Relearn 主题提供了丰富的 shortcodes 。
attachment（附件） 警告 附件放在 _index.files 目录下。
{{% attachments title=&#34;**文件**&#34; pattern=&#34;.*\.(pdf|jpg)&#34; /%}} 文件 arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf (493 KB) cat.jpg (48 KB) {{% attachments style=&#34;info&#34; sort=&#34;desc&#34; /%}} 信息 test.txt (36 B) cat.jpg (48 KB) arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf (493 KB) badge（徽章） {{% badge %}}Important{{% /badge %}} {{% badge style=&#34;primary&#34; title=&#34;Version&#34; %}}6.6.6{{% /badge %}} {{% badge style=&#34;red&#34; icon=&#34;angle-double-up&#34; %}}Captain{{% /badge %}} {{% badge style=&#34;info&#34; %}}New{{% /badge %}} {{% badge color=&#34;fuchsia&#34; icon=&#34;fab fa-hackerrank&#34; %}}Awesome{{% /badge %}}Important Version6.">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://dipperkun.gitee.io/static-website/shortcodes/">
    <meta property="article:section" content="静态网站 :: 笔记">
    <meta property="og:site_name" content="笔记">
    <title>shortcodes(简码) :: 笔记</title>
    <link href="../../static-website/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="shortcodes(简码) :: 笔记">
    <link href="../../static-website/shortcodes/index.print.html" rel="alternate" type="text/html" title="shortcodes(简码) :: 笔记">
    <link href="../../images/favicon.png?1701141428" rel="icon" type="image/png">
    <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
    <link href="../../css/fontawesome-all.min.css?1701141428" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1701141428" rel="stylesheet"></noscript>
    <link href="../../css/nucleus.css?1701141428" rel="stylesheet">
    <link href="../../css/auto-complete.css?1701141428" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1701141428" rel="stylesheet"></noscript>
    <link href="../../css/perfect-scrollbar.min.css?1701141428" rel="stylesheet">
    <link href="../../css/fonts.css?1701141428" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1701141428" rel="stylesheet"></noscript>
    <link href="../../css/theme.css?1701141428" rel="stylesheet">
    <link href="../../css/theme-zen-light.css?1701141428" rel="stylesheet" id="R-variant-style">
    <link href="../../css/variant.css?1701141428" rel="stylesheet">
    <link href="../../css/print.css?1701141428" rel="stylesheet" media="print">
    <link href="../../css/ie.css?1701141428" rel="stylesheet">
    <script src="../../js/url.js?1701141428"></script>
    <script src="../../js/variant.js?1701141428"></script>
    <script>
      // hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
      // https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
      window.index_js_url="../../index.search.js";
      var root_url="../../";
      var baseUri=root_url.replace(/\/$/, '');
      // translations
      window.T_Copy_to_clipboard = '复制到剪贴板';
      window.T_Copied_to_clipboard = '复制到剪贴板！';
      window.T_Copy_link_to_clipboard = '将链接复制到剪贴板';
      window.T_Link_copied_to_clipboard = '链接复制到剪贴板！';
      window.T_Reset_view = '重置视图';
      window.T_View_reset = '查看重置！';
      window.T_No_results_found = '找不到\u0022{0}\u0022的结果';
      window.T_N_results_found = '为\u0022{0}\u0022找到 {1} 个结果';
      // some further base stuff
      var baseUriFull='https:\/\/dipperkun.gitee.io/';
      window.variants && variants.init( [ 'zen-light', 'zen-dark' ] );
    </script>
  </head>
  <body class="mobile-support html disableInlineCopyToClipboard" data-url="../../static-website/shortcodes/">
    <div id="R-body" class="default-animation">
      <div id="R-body-overlay"></div>
      <nav id="R-topbar">
        <div class="topbar-wrapper">
          <div class="topbar-sidebar-divider"></div>
          <div class="topbar-area topbar-area-start" data-area="start">
            <div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide">
              <button class="topbar-control" onclick="toggleNav()" type="button" title="导航 (CTRL&#43;ALT&#43;n)">
                <i class="fa-fw fas fa-bars"></i>
              </button>
            </div>
            <div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show">
              <button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="目录 (CTRL&#43;ALT&#43;t)">
                <i class="fa-fw fas fa-list-alt"></i>
              </button>
              <div class="topbar-content">
                <div class="topbar-content-wrapper"><nav class="TableOfContents">
  <ul>
    <li><a href="#attachment附件">attachment（附件）</a></li>
    <li><a href="#badge徽章">badge（徽章）</a></li>
    <li><a href="#button按钮">button（按钮）</a></li>
    <li><a href="#子页面">子页面</a></li>
    <li><a href="#展开与折叠">展开与折叠</a></li>
    <li><a href="#icon图标">icon（图标）</a></li>
    <li><a href="#include内嵌">include（内嵌）</a></li>
    <li><a href="#公式">公式</a></li>
    <li><a href="#mermaid">mermaid</a></li>
    <li><a href="#提示">提示</a></li>
    <li><a href="#tabs选项卡">TABS（选项卡）</a></li>
  </ul>
</nav>
                </div>
              </div>
            </div>
          </div>
          <ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
            itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../"><span itemprop="name">[生活/工作/学习]</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
            itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../static-website/"><span itemprop="name">静态网站</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li><li
            itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">shortcodes(简码)</span><meta itemprop="position" content="3"></li>
          </ol>
          <div class="topbar-area topbar-area-end" data-area="end">
            <div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show">
              <a class="topbar-control" href="../../static-website/shortcodes/index.print.html" title="打印整章 (CTRL&#43;ALT&#43;p)">
                <i class="fa-fw fas fa-print"></i>
              </a>
            </div>
            <div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show">
              <a class="topbar-control" href="../../static-website/markdown-syntax/" title="Markdown (🡐)">
                <i class="fa-fw fas fa-chevron-left"></i>
              </a>
            </div>
            <div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show">
              <span class="topbar-control">
                <i class="fa-fw fas fa-chevron-right"></i>
              </span>
            </div>
            <div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show">
              <button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="更多">
                <i class="fa-fw fas fa-ellipsis-v"></i>
              </button>
              <div class="topbar-content">
                <div class="topbar-content-wrapper">
                  <div class="topbar-area topbar-area-more" data-area="more">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
      <div id="R-main-overlay"></div>
      <main id="R-body-inner" class="highlightable default" tabindex="-1">
        <div class="flex-block-wrapper">
          <article class="default">
            <header class="headline">
<div class=" taxonomy-tags term-list cstyle  tags" title="Tags" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <ul>
    <li><a class="term-link" href="../../tags/markdown/">markdown</a></li>
    <li><a class="term-link" href="../../tags/shortcodes/">shortcodes</a></li>
  </ul>
</div>
            </header>
<h1 id="shortcodes简码">shortcodes(简码)</h1>

<p><code>shortcodes</code> 是 <code>markdown</code> 的补充，是 <code>hugo</code> 提供的扩展功能，简化了网站代码的编写。<code>Relearn</code> 主题提供了丰富的 <code>shortcodes</code> 。</p>
<h2 id="attachment附件">attachment（附件）</h2>

<div class="box notices cstyle warning">
  <div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> 警告</div>
  <div class="box-content">

<p>附件放在 <code>_index.files</code> 目录下。</p>
</div>
</div>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">attachments</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;**文件**&#34;</span> <span class="nx">pattern</span><span class="p">=</span><span class="s">&#34;.*\.(pdf|jpg)&#34;</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box attachments cstyle transparent">
  <div class="box-label"><i class="fa-fw fas fa-paperclip"></i> <strong>文件</strong></div>
  <ul class="box-content attachments-files">
      <li><a href="../../static-website/shortcodes/index.files/arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf">arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf</a> (493 KB)</li>
      <li><a href="../../static-website/shortcodes/index.files/cat.jpg">cat.jpg</a> (48 KB)</li>
  </ul>
</div>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">attachments</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="nx">sort</span><span class="p">=</span><span class="s">&#34;desc&#34;</span> <span class="o">/%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box attachments cstyle info">
  <div class="box-label"><i class="fa-fw fas fa-info-circle"></i> 信息</div>
  <ul class="box-content attachments-files">
      <li><a href="../../static-website/shortcodes/index.files/test.txt">test.txt</a> (36 B)</li>
      <li><a href="../../static-website/shortcodes/index.files/cat.jpg">cat.jpg</a> (48 KB)</li>
      <li><a href="../../static-website/shortcodes/index.files/arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf">arm_compiler_6_-_bare-metal_hello_world_c_using_the_armv8_model_102675_0100_02_en.pdf</a> (493 KB)</li>
  </ul>
</div>
<h2 id="badge徽章">badge（徽章）</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Important</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Version&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="mf">6.6.6</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;angle-double-up&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Captain</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">New</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">color</span><span class="p">=</span><span class="s">&#34;fuchsia&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;fab fa-hackerrank&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle default"><span class="badge-content">Important</span></span>
<span class="badge cstyle primary badge-with-title"><span class="badge-title">Version</span><span class="badge-content">6.6.6</span></span>
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i></span><span class="badge-content">Captain</span></span>
<span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> 信息</span><span class="badge-content">New</span></span>
<span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">Awesome</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">New</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;note&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Change</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;tip&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Optional</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;warning&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Breaking</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-info-circle"></i> 信息</span><span class="badge-content">New</span></span>
<span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i> 注释</span><span class="badge-content">Change</span></span>
<span class="badge cstyle tip badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-lightbulb"></i> 提示</span><span class="badge-content">Optional</span></span>
<span class="badge cstyle warning badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-triangle"></i> 警告</span><span class="badge-content">Breaking</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;声明&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Mandatory</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;secondary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;声明&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Optional</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;声明&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Special</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> 声明</span><span class="badge-content">Mandatory</span></span>
<span class="badge cstyle secondary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> 声明</span><span class="badge-content">Optional</span></span>
<span class="badge cstyle accent badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-bullhorn"></i> 声明</span><span class="badge-content">Special</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;blue&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Blue</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Green</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;grey&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Grey</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;orange&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Orange</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;palette&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Color&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Red</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><span class="badge cstyle blue badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Blue</span></span>
<span class="badge cstyle green badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Green</span></span>
<span class="badge cstyle grey badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Grey</span></span>
<span class="badge cstyle orange badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Orange</span></span>
<span class="badge cstyle red badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-palette"></i> Color</span><span class="badge-content">Red</span></span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;rocket&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Feature&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><span class="badge cstyle info badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-rocket"></i> Feature</span><span class="badge-content">Awesome</span></span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;angle-double-up&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Rank&#34;</span> <span class="p">&gt;}}{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">skull</span><span class="o">-</span><span class="nx">crossbones</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">Pirate</span><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">badge</span> <span class="p">&gt;}}</span></span></span></code></pre></div><span class="badge cstyle primary badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-angle-double-up"></i> Rank</span><span class="badge-content"><i class="fa-fw fas fa-skull-crossbones"></i> Pirate</span></span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">段落内显示</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">badge</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;blue&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;rocket&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Awesome</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">badge</span> <span class="o">%</span><span class="p">}}</span> <span class="nx">徽章</span><span class="err">。</span></span></span></code></pre></div><p>段落内显示 <span class="badge cstyle blue badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-rocket"></i></span><span class="badge-content">Awesome</span></span> 徽章。</p>
<h2 id="button按钮">button（按钮）</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;info&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;note&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;tip&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;warning&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p>
<span class="btn cstyle info">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-info-circle"></i>
    Hugo
  </a>
</span>

<span class="btn cstyle note">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-exclamation-circle"></i>
    Hugo
  </a>
</span>

<span class="btn cstyle tip">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-lightbulb"></i>
    Hugo
  </a>
</span>

<span class="btn cstyle warning">
  <a href="https://gohugo.io/" target="_blank">
    <i class="fa-fw fas fa-exclamation-triangle"></i>
    Hugo
  </a>
</span></p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;download&#34;</span> <span class="nx">iconposition</span><span class="p">=</span><span class="s">&#34;right&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<span class="btn cstyle transparent">
  <a href="https://gohugo.io/" target="_blank">
    Hugo
    <i class="fa-fw fas fa-download"></i>
  </a>
</span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;/index.html&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">首页</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<span class="btn cstyle transparent">
  <a href="../../index.html">
    首页
  </a>
</span>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;bullhorn&#34;</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;javascript:alert(&#39;Haaa&#39;);this.blur();&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Haaa</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<span class="btn cstyle primary">
  <button onclick="alert(&#39;Haaa&#39;);this.blur();" type="button">
    <i class="fa-fw fas fa-bullhorn"></i>
    Haaa
  </button>
</span>
<h2 id="子页面">子页面</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="c1">// 1.默认，不显示隐藏子页面
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span>  <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 2.显示子页面描述信息
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span>  <span class="nx">description</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 3.递归显示所有子页面，包括隐藏子页面
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;999&#34;</span> <span class="nx">showhidden</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 4。标题风格
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;h2&#34;</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;3&#34;</span> <span class="nx">description</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 5.块风格
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">children</span> <span class="nx">containerstyle</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;div&#34;</span> <span class="nx">depth</span><span class="p">=</span><span class="s">&#34;3&#34;</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p><a href="#R-image-9136254b5524a43bc4dd5fa55b5a5031" class="lightbox-link"><img src="../../static-website/shortcodes/images/children01.png?classes=border" alt="children 1" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-9136254b5524a43bc4dd5fa55b5a5031"><img src="../../static-website/shortcodes/images/children01.png?classes=border" alt="children 1" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-4a3a0f0fb0cd1c924b6630dae35dbf57" class="lightbox-link"><img src="../../static-website/shortcodes/images/children02.png?classes=border" alt="children 2" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-4a3a0f0fb0cd1c924b6630dae35dbf57"><img src="../../static-website/shortcodes/images/children02.png?classes=border" alt="children 2" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-ccacd33d25d88cc3a06f495ff01ac4fd" class="lightbox-link"><img src="../../static-website/shortcodes/images/children03.png?classes=border" alt="children 3" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-ccacd33d25d88cc3a06f495ff01ac4fd"><img src="../../static-website/shortcodes/images/children03.png?classes=border" alt="children 3" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-2ec1bb327c8551df28c5af6811b0328d" class="lightbox-link"><img src="../../static-website/shortcodes/images/children04.png?classes=border" alt="children 4" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-2ec1bb327c8551df28c5af6811b0328d"><img src="../../static-website/shortcodes/images/children04.png?classes=border" alt="children 4" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<p><a href="#R-image-909df31a30a2ad97ede26903664ef4ad" class="lightbox-link"><img src="../../static-website/shortcodes/images/children05.png?classes=border" alt="children 5" class="figure-image border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="R-image-909df31a30a2ad97ede26903664ef4ad"><img src="../../static-website/shortcodes/images/children05.png?classes=border" alt="children 5" class="lightbox-image border lightbox noshadow" loading="lazy"></a></p>
<h2 id="展开与折叠">展开与折叠</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;展开...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="expand">
    <input type="checkbox" id="R-expand-ff06cde7ba77f73bb78363e051cfae35" aria-controls="R-expandcontent-ff06cde7ba77f73bb78363e051cfae35"  checked>
    <label class="expand-label" for="R-expand-ff06cde7ba77f73bb78363e051cfae35" >
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-chevron-right"></i>
        展开&hellip;
    </label>
    <div id="R-expandcontent-ff06cde7ba77f73bb78363e051cfae35" class="expand-content">
<p>
No need to press you!</div>
</div>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;展开 **markdown** 内容&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">You</span> <span class="nx">can</span> <span class="nx">add</span> <span class="nx">standard</span> <span class="nx">markdown</span> <span class="nx">syntax</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">and</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">etc</span><span class="p">.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">the</span> <span class="nx">possibilities</span> <span class="nx">are</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">including</span> <span class="nx">other</span> <span class="nx">shortcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="expand">
    <input type="checkbox" id="R-expand-506808abf1abafc4163497ac510bc75e" aria-controls="R-expandcontent-506808abf1abafc4163497ac510bc75e" >
    <label class="expand-label" for="R-expand-506808abf1abafc4163497ac510bc75e" >
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-chevron-right"></i>
        展开 <strong>markdown</strong> 内容
    </label>
    <div id="R-expandcontent-506808abf1abafc4163497ac510bc75e" class="expand-content">

<p>You can add standard markdown syntax:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li>
<li><a href="https://example.com" target="_blank">links</a></li>
<li>etc.</li>
</ul>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
<p>the possibilities are endless (almost - including other shortcodes may or may not work)</p>
</blockquote>
</div>
</div>
<h2 id="icon图标">icon（图标）</h2>
<p>图标地址：<a href="https://fontawesome.com/v5/search?m=free" target="_blank">Font Awesome Gallery</a>。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="nx">图标</span><span class="err">：</span><span class="p">{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">heart</span> <span class="o">%</span><span class="p">}}</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">wifi</span> <span class="o">%</span><span class="p">}}</span> <span class="p">&lt;</span><span class="nx">i</span> <span class="nx">class</span><span class="p">=</span><span class="s">&#34;fas fa-heart&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;color: #FF0000;&#34;</span><span class="p">&gt;&lt;</span><span class="o">/</span><span class="nx">i</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nx">i</span> <span class="nx">class</span><span class="p">=</span><span class="s">&#34;fas fa-walking&#34;</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;color: red;&#34;</span><span class="p">&gt;&lt;</span><span class="o">/</span><span class="nx">i</span><span class="p">&gt;</span> <span class="p">{{</span><span class="o">%</span> <span class="nx">icon</span> <span class="nx">tools</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div><p>图标：<i class="fa-fw fas fa-heart"></i> <i class="fa-fw fas fa-wifi"></i>
<i class="fas fa-heart" style="color: #FF0000;"></i>
<i class="fas fa-walking" style="color: red;"></i> <i class="fa-fw fas fa-tools"></i></p>
<h2 id="include内嵌">include（内嵌）</h2>
<p>以下内容位于 <code>inc.md</code> 中。</p>
<p>You can add standard markdown syntax:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> and even <strong><em>bold emphasized</em></strong> text</li>
<li><a href="https://example.com" target="_blank">links</a></li>
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
</ul>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
<p>the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)</p>
</blockquote>
<h2 id="公式">公式</h2>
<p>使用 <a href="https://mathjax.org/" target="_blank">MathJax</a>。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">```math { align=&#34;center&#34; }
</span></span><span class="line"><span class="cl">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<span class="math align-center">$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$</span><p>行内公式使用 <code>$</code>，例如 <code>{{&lt; math &gt;}}$\sqrt{3}${{&lt; /math &gt;}}</code>：
<span class="math align-center">$\sqrt{3}$</span> 。</p>
<h2 id="mermaid">mermaid</h2>
<p>绘制流程图与框图。</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">```mermaid { align=&#34;center&#34; zoom=&#34;true&#34; }
</span></span><span class="line"><span class="cl">graph LR;
</span></span><span class="line"><span class="cl">    If --&gt; Then
</span></span><span class="line"><span class="cl">    Then --&gt; Else
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<pre class="mermaid align-center zoom">graph LR;
    If --&gt; Then
    Then --&gt; Else</pre><p><strong>流程图</strong></p>

<pre class="mermaid align-center zoom">
---
title: Example Diagram
---
graph LR;
    A[Hard edge] --&gt;|Link text| B(Round edge)
    B --&gt; C{&lt;strong&gt;Decision&lt;/strong&gt;}
    C --&gt;|One| D[Result one]
    C --&gt;|Two| E[Result two]
</pre>
<p><strong>流程图（带序号）</strong></p>

<pre class="mermaid align-center zoom">
%%{init:{&#34;fontFamily&#34;:&#34;monospace&#34;, &#34;sequence&#34;:{&#34;showSequenceNumbers&#34;:true}}}%%
sequenceDiagram
    Alice-&gt;&gt;John: Hello John, how are you?
    loop Healthcheck
        John-&gt;&gt;John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John--&gt;&gt;Alice: Great!
    John-&gt;&gt;Bob: How about you?
    Bob--&gt;&gt;John: Jolly good!
</pre>
<p><strong>类图</strong></p>

<pre class="mermaid align-center zoom">classDiagram
    Animal &lt;|-- Duck
    Animal &lt;|-- Fish
    Animal &lt;|-- Zebra
    Animal : &#43;int age
    Animal : &#43;String gender
    Animal: &#43;isMammal()
    Animal: &#43;mate()
    class Duck{
      &#43;String beakColor
      &#43;swim()
      &#43;quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      &#43;bool is_wild
      &#43;run()
    }</pre><p><strong>状态图（右对齐）</strong></p>

<pre class="mermaid align-right zoom">
stateDiagram-v2
    open: Open Door
    closed: Closed Door
    locked: Locked Door
    open   --&gt; closed: Close
    closed --&gt; locked: Lock
    locked --&gt; closed: Unlock
    closed --&gt; open: Open
</pre>
<p><strong>行程安排图</strong></p>

<pre class="mermaid align-center zoom">
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
</pre>
<p><strong>甘特图</strong></p>

<pre class="mermaid align-center zoom">
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to Mermaid
        section A section
        Completed task            :done,    des1, 2023-01-06,2023-01-08
        Active task               :active,  des2, 2023-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2              :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2023-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to Mermaid                      :1d
</pre>
<p><strong>饼状图（禁用缩放）</strong></p>

<pre class="mermaid align-center">
pie title Pets adopted by volunteers
    &#34;Dogs&#34; : 386
    &#34;Cats&#34; : 85
    &#34;Rats&#34; : 15
</pre>
<p><strong>象限图</strong></p>

<pre class="mermaid align-center zoom">quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --&gt; High Reach
    y-axis Low Engagement --&gt; High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]</pre><p><strong>脑图</strong></p>

<pre class="mermaid align-center zoom">mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness&lt;br/&gt;and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid</pre><p><strong>时间线图</strong></p>

<pre class="mermaid align-center zoom">timeline
    title 时间线图
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter</pre><p><strong>柱状图</strong></p>

<pre class="mermaid align-center zoom">xychart-beta
    title &#34;Sales Revenue&#34;
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis &#34;Revenue (in $)&#34; 4000 --&gt; 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]</pre><h2 id="提示">提示</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="c1">// style: info, note, tip, warning
</span></span></span><span class="line"><span class="cl"><span class="c1">// style: primary,secondary, accent
</span></span></span><span class="line"><span class="cl"><span class="c1">// style: blue, green, grey, orange, red
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;xxx&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;yyy&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;zzz&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">内容</span><span class="err">，</span><span class="nx">可以包含</span> <span class="s">`markdown`</span> <span class="nx">格式</span><span class="err">。</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle info">
  <div class="box-label"><i class="fa-fw fas fa-info-circle"></i> 信息</div>
  <div class="box-content">

<p>An <strong>information</strong> disclaimer</p>
<p>You can add standard markdown syntax:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> and even <em><strong>bold emphasized</strong></em> text</li>
<li><a href="https://example.com" target="_blank">links</a></li>
<li>etc.</li>
</ul>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div><blockquote>
<p>the possibilities are endless (almost - including other shortcodes may or may not work)</p>
</blockquote>
</div>
</div>

<div class="box notices cstyle warning">
  <div class="box-label"><i class="fa-fw fas fa-exclamation-triangle"></i> 警告</div>
  <div class="box-content">

<p>A <strong>warning</strong> disclaimer</p>
</div>
</div>

<div class="box notices cstyle warning">
  <div class="box-label"><i class="fa-fw fas fa-dragon"></i> 奖励</div>
  <div class="box-content">

<p>替换 <strong>默认</strong> 标题与图标。</p>
</div>
</div>

<div class="box notices cstyle default" style="--VARIABLE-BOX-color: fuchsia;">
  <div class="box-label"><i class="fab fa-hackerrank"></i> <strong>Hugo</strong></div>
  <div class="box-content">

<p>使用自定义的色彩与图标</p>
</div>
</div>
<h2 id="tabs选项卡">TABS（选项卡）</h2>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="c1">// groupid 具有相同id的多个选项卡联动
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">{{&lt;</span> <span class="nx">tabs</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;hello.&#34;</span> <span class="nx">groupid</span><span class="p">=</span><span class="s">&#34;aaa&#34;</span> <span class="p">&gt;}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;py&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">这是</span> <span class="o">**</span><span class="nx">python</span><span class="o">**</span> <span class="nx">代码</span>
</span></span><span class="line"><span class="cl"><span class="s">```python
</span></span></span><span class="line"><span class="cl"><span class="s">print(&#34;Hello World!&#34;)
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;sh&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="s">```bash
</span></span></span><span class="line"><span class="cl"><span class="s">echo &#34;Hello World!&#34;
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">tab</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;c&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">这是</span> <span class="o">**</span><span class="nx">c</span><span class="o">**</span> <span class="nx">代码</span>
</span></span><span class="line"><span class="cl"><span class="s">```c
</span></span></span><span class="line"><span class="cl"><span class="s">printf&#34;Hello World!&#34;);
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">tab</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="o">/</span><span class="nx">tabs</span> <span class="p">&gt;}}</span></span></span></code></pre></div>
<div class="tab-panel" data-tab-group="aaa">
  <div class="tab-nav">
    <div class="tab-nav-title">hello.</div>
    <button
      data-tab-item="py"
      class="tab-nav-button tab-panel-style cstyle initial active"
      onclick="switchTab('aaa','py')"
    >
      <span class="tab-nav-text">py</span>
    </button>
    <button
      data-tab-item="sh"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('aaa','sh')"
    >
      <span class="tab-nav-text">sh</span>
    </button>
    <button
      data-tab-item="c"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('aaa','c')"
    >
      <span class="tab-nav-text">c</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="py"
      class="tab-content tab-panel-style cstyle initial active">
      <div class="tab-content-text">

<p>这是 <strong>python</strong> 代码</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;Hello World!&#34;</span><span class="p">)</span></span></span></code></pre></div></div>
    </div>
    <div
      data-tab-item="sh"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">&#34;Hello World!&#34;</span></span></span></code></pre></div></div>
    </div>
    <div
      data-tab-item="c"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<p>这是 <strong>c</strong> 代码</p>
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="n">printf</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div></div>
    </div>
  </div>
</div>

<div class="tab-panel" data-tab-group="main">
  <div class="tab-nav">
    <div class="tab-nav-title"><i class="fa-fw fas fa-thumbtack"></i> 嵌套选项卡</div>
    <button
      data-tab-item="text"
      class="tab-nav-button tab-panel-style cstyle primary active"
      onclick="switchTab('main','text')"
    >
      <span class="tab-nav-text">Text</span>
    </button>
    <button
      data-tab-item="code"
      class="tab-nav-button tab-panel-style cstyle default" style="--VARIABLE-BOX-color: darkorchid;"
      onclick="switchTab('main','code')"
    >
      <span class="tab-nav-text">Code</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="text"
      class="tab-content tab-panel-style cstyle primary active">
      <div class="tab-content-text">
<p>

  这个 tab 只能使用 '<'，这里的文字不能使用 markdown
  
<div class="tab-panel" data-tab-group="tabs-example-language">
  <div class="tab-nav">
    <div class="tab-nav-title">&#8203;</div>
    <button
      data-tab-item="python"
      class="tab-nav-button tab-panel-style cstyle initial active"
      onclick="switchTab('tabs-example-language','python')"
    >
      <span class="tab-nav-text">python</span>
    </button>
    <button
      data-tab-item="bash"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('tabs-example-language','bash')"
    >
      <span class="tab-nav-text">bash</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="python"
      class="tab-content tab-panel-style cstyle initial active">
      <div class="tab-content-text">

<p>Python is <strong>super</strong> easy.</p>
<ul>
<li>most of the time.</li>
<li>if you don&rsquo;t want to output unicode</li>
</ul>
</div>
    </div>
    <div
      data-tab-item="bash"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<p>Bash is for <strong>hackers</strong>.</p>
</div>
    </div>
  </div>
</div>
</div>
    </div>
    <div
      data-tab-item="code"
      class="tab-content tab-panel-style cstyle default" style="--VARIABLE-BOX-color: darkorchid;">
      <div class="tab-content-text">


  
<div class="tab-panel" data-tab-group="tabs-example-language">
  <div class="tab-nav">
    <div class="tab-nav-title">&#8203;</div>
    <button
      data-tab-item="python"
      class="tab-nav-button tab-panel-style cstyle initial active"
      onclick="switchTab('tabs-example-language','python')"
    >
      <span class="tab-nav-text">python</span>
    </button>
    <button
      data-tab-item="bash"
      class="tab-nav-button tab-panel-style cstyle initial"
      onclick="switchTab('tabs-example-language','bash')"
    >
      <span class="tab-nav-text">bash</span>
    </button>
  </div>
  <div class="tab-content-container">
    <div
      data-tab-item="python"
      class="tab-content tab-panel-style cstyle initial active">
      <div class="tab-content-text">

<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;Hello World!&#34;</span><span class="p">)</span></span></span></code></pre></div></div>
    </div>
    <div
      data-tab-item="bash"
      class="tab-content tab-panel-style cstyle initial">
      <div class="tab-content-text">

<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">echo</span> <span class="s2">&#34;Hello World!&#34;</span></span></span></code></pre></div></div>
    </div>
  </div>
</div>
</div>
    </div>
  </div>
</div>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean &ldquo;and other similar things&rdquo;, or &ldquo;and so forth&rdquo;&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>

            <footer class="footline">
<div class=" taxonomy-categories term-list cstyle  " title="Categories" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
  <i class="fa-fw fas fa-layer-group"></i>
  <ul>
    <li><a class="term-link" href="../../categories/%E5%B7%A5%E5%85%B7/">工具</a></li>
  </ul>
</div>
            </footer>
          </article>
        </div>
      </main>
    </div>
    <aside id="R-sidebar" class="default-animation showVisitedLinks">
      <div id="R-header-topbar" class="default-animation"></div>
      <div id="R-header-wrapper" class="default-animation">
        <div id="R-header" class="default-animation">
          <style>
            #R-logo svg,
            #R-logo svg * {
              color: #282828;
              color: var(--MENU-SECTIONS-BG-color);
              fill: #282828 !important;
              fill: var(--MENU-SECTIONS-BG-color) !important;
              opacity: .945;
            }
            a#R-logo {
              color: #282828;
              color: var(--MENU-SECTIONS-BG-color);
              font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
              font-size: 1.875rem;
              font-weight: 300;
              margin-top: -.8125rem;
              max-width: 60%;
              text-transform: uppercase;
              width: 14.125rem;
              white-space: nowrap;
            }
            a#R-logo:hover {
              color: #282828;
              color: var(--MENU-SECTIONS-BG-color);
            }
            #R-logo svg {
              margin-bottom: -1.25rem;
              margin-inline-start: -1.47rem;
              margin-inline-end: .5rem;
              width: 40.5%;
            }
            @media only all and (max-width: 59.999rem) {
              a#R-logo {
                font-size: 1.5625rem;
                margin-top: -.1875rem;
              }
              #R-logo svg {
                margin-bottom: -.75rem;
                margin-inline-start: -1.47rem;
                margin-inline-end: .5rem;
              }
            }
            @media all and (-ms-high-contrast:none) {
              /* IE11s understanding of positioning is weird at best */
              a#R-logo {
                margin-top: -3.625rem;
              }
              #R-logo svg {
                margin-bottom: -3.875rem;
                margin-left: -1.47rem;
                margin-right: .5rem;
              }
            }
            @media only all and (-ms-high-contrast:none) and (max-width: 59.999rem) {
              #R-logo svg {
                margin-left: -1.47rem;
                margin-right: .5rem;
              }
            }
          </style>
          <a id="R-logo" href="../../">
            NOTEBOOK
          </a>

        </div>
        <form action="../../search.html" method="get"><div class="searchbox default-animation">
          <button class="search-detail" type="submit" title="搜索 (CTRL+ALT+f)"><i class="fas fa-search"></i></button>
          <label class="a11y-only" for="R-search-by">搜索</label>
          <input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="搜索...">
          <button class="search-clear" type="button" data-search-clear="" title="清除搜索"><i class="fas fa-times" title="清除搜索"></i></button>
        </div></form>
        <script>
          var contentLangs=['zh'];
        </script>
        <script src="../../js/auto-complete.js?1701141429" defer></script>
        <script src="../../js/lunr/lunr.min.js?1701141429" defer></script>
        <script src="../../js/lunr/lunr.stemmer.support.min.js?1701141429" defer></script>
        <script src="../../js/lunr/lunr.multi.min.js?1701141429" defer></script>
        <script src="../../js/lunr/lunr.zh.min.js?1701141429" defer></script>
        <script src="../../js/search.js?1701141429" defer></script>
      </div>
      <div id="R-homelinks" class="default-animation">
        <hr class="padding">
      </div>
      <div id="R-content-wrapper" class="highlightable">
        <div id="R-topics">
          <ul class="enlarge morespace collapsible-menu">
          <li data-nav-id="/data-structure/" class=""><a class="padding" href="../../data-structure/"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">1.</b> 
数据结构与算法<i class="fas fa-check read-icon"></i></a></li>
          <li data-nav-id="/linux-kernel/" class=""><a class="padding" href="../../linux-kernel/"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">2.</b> 
Linux Kernel<i class="fas fa-check read-icon"></i></a></li>
          <li data-nav-id="/networking/" class=""><a class="padding" href="../../networking/"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">3.</b> 
计算机网络<i class="fas fa-check read-icon"></i></a></li>
          <li data-nav-id="/arm-arch/" class=""><a class="padding" href="../../arm-arch/"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">4.</b> 
ARM体系结构<i class="fas fa-check read-icon"></i></a></li>
          <li data-nav-id="/tools/" class=""><a class="padding" href="../../tools/"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">9.</b> 
常用工具<i class="fas fa-check read-icon"></i></a></li>
          <li data-nav-id="/static-website/" class="parent "><input type="checkbox" id="R-section-2697f83fe819da45e6e8016c89d0f1d0" aria-controls="R-subsections-2697f83fe819da45e6e8016c89d0f1d0" checked><label for="R-section-2697f83fe819da45e6e8016c89d0f1d0"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">子菜单静态网站</span></label><a class="padding" href="../../static-website/"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">10.</b> 
静态网站<i class="fas fa-check read-icon"></i></a><ul id="R-subsections-2697f83fe819da45e6e8016c89d0f1d0" class="morespace collapsible-menu">
          <li data-nav-id="/static-website/howto-use-hugo/" class=""><a class="padding" href="../../static-website/howto-use-hugo/">
使用hugo搭建静态网站<i class="fas fa-check read-icon"></i></a></li>
          <li data-nav-id="/static-website/markdown-syntax/" class=""><a class="padding" href="../../static-website/markdown-syntax/">
Markdown<i class="fas fa-check read-icon"></i></a></li>
          <li data-nav-id="/static-website/shortcodes/" class="active"><a class="padding" href="../../static-website/shortcodes/">
shortcodes(简码)<i class="fas fa-check read-icon"></i></a></li></ul></li>
          </ul>
        </div>
        <div id="R-shortcuts">
          <div class="nav-title padding">更多</div>
          <ul class="space">
            <li><a class="padding" href="https://gitee.com/dipperkun"><i class='fab fa-fw fa-git'></i> Gitee</a></li>
            <li><a class="padding" href="https://mcshelby.github.io/hugo-theme-relearn/"><i class='fas fa-fw fa-bookmark'></i> Relearn主题</a></li>
            <li><a class="padding" href="../../tags/"><i class='fas fa-fw fa-tags'></i> 标签</a></li>
            <li><a class="padding" href="../../categories/"><i class='fas fa-fw fa-layer-group'></i> 分类</a></li>
          </ul>
        </div>
        <div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showVariantSwitch showVisitedLinks showFooter"></div>
        <div id="R-menu-footer">
          <hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showVariantSwitch showVisitedLinks showFooter">
          <div id="R-prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks showVariantSwitch showVisitedLinks">
            <ul>
              <li id="R-select-language-container" class="footerLangSwitch">
                <div class="padding menu-control">
                  <i class="fas fa-language fa-fw"></i>
                  <span>&nbsp;</span>
                  <div class="control-style">
                    <label class="a11y-only" for="R-select-language">语言</label>
                    <select id="R-select-language" onchange="location = baseUri + this.value;">
                    </select>
                  </div>
                  <div class="clear"></div>
                </div>
              </li>
              <li id="R-select-variant-container" class="footerVariantSwitch showVariantSwitch">
                <div class="padding menu-control">
                  <i class="fas fa-paint-brush fa-fw"></i>
                  <span>&nbsp;</span>
                  <div class="control-style">
                    <label class="a11y-only" for="R-select-variant">主题</label>
                    <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
                      <option id="R-zen-light" value="zen-light" selected>Zen Light</option>
                      <option id="R-zen-dark" value="zen-dark">Zen Dark</option>
                    </select>
                  </div>
                  <div class="clear"></div>
                </div>
                <script>window.variants && variants.markSelectedVariant();</script>
              </li>
              <li class="footerVisitedLinks showVisitedLinks">
                <div class="padding menu-control">
                  <i class="fas fa-history fa-fw"></i>
                  <span>&nbsp;</span>
                  <div class="control-style">
                    <button onclick="clearHistory();">清理历史记录</button>
                  </div>
                  <div class="clear"></div>
                </div>
              </li>
            </ul>
          </div>
          <div id="R-footer" class="footerFooter showFooter">
<p>Built with <a href="https://gitee.com/dippekun" title="love"><i class="fas fa-heart" style="color: #FF0000;"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
          </div>
        </div>
      </div>
    </aside>
    <script src="../../js/clipboard.min.js?1701141429" defer></script>
    <script src="../../js/perfect-scrollbar.min.js?1701141429" defer></script>
    <script>
      function useMathJax( config ){
        if( !Object.assign ){
          
          return;
        }
        window.MathJax = Object.assign( window.MathJax || {}, {
          loader: {
            load: ['[tex]/mhchem']
          },
          startup: {
            elements: [
              '.math'
            ]
          },
          tex: {
            inlineMath: [
              ['$', '$'], 
              ['\\(', '\\)']
            ]
          },
          options: {
            enableMenu: false 
          }
        }, config );
      }
      useMathJax( JSON.parse("{}") );
    </script>
    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1701141429"></script>
    <script src="../../js/d3/d3-color.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-dispatch.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-drag.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-ease.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-interpolate.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-selection.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-timer.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-transition.min.js?1701141429" defer></script>
    <script src="../../js/d3/d3-zoom.min.js?1701141429" defer></script>
    <script src="../../js/js-yaml.min.js?1701141429" defer></script>
    <script src="../../js/mermaid.min.js?1701141429" defer></script>
    <script>
      window.themeUseMermaid = JSON.parse("{}");
    </script>
    <script src="../../js/theme.js?1701141429" defer></script>
  </body>
</html>
